<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css定位</title>
    <style>
        .big {
            width: 1200px;
            height: 700px;
            background-color: bisque;
            position: relative;
            top: 50px;
            left: 20px;
            margin: 0 auto;
            text-align: center;
        }
        
        .small {
            background-color: coral;
            width: 430px;
            height: 650px;
            position: absolute;
            right: 300px;
            top: 0px;
        }
        
        .btn {
            width: 100px;
            height: 30px;
            border: 1px solid black;
            margin: 0 auto;
            background-color: rgb(226, 172, 121);
            border-radius: 50px;
        }
        
        .small2 {
            background-color: cornflowerblue;
            width: 350px;
            height: 350px;
            position: absolute;
            left: 150px;
            top: 150px;
            box-shadow: 10px 10px 5px gray;
        }
        
        .small3 {
            background-color: chocolate;
            width: 350px;
            height: 250px;
            position: absolute;
            bottom: 100px;
            left: 200px;
            box-shadow: 5px 5px 5px gray;
        }
        
        body {
            background-color: rgb(109, 156, 228);
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small">
            <h2>我是大盒子</h2>
            <p>啦啦啦，啦啦啦， 我是卖报的小行家。 不等天明去卖报， 一面走，一面叫。 今天的新闻真正好。 七个铜板就买两份报。
            </p>
            <div class="btn">
                get in touch
            </div>
        </div>
        <div class="small2"></div>
        <div class="small3">
            <h3>我是小盒子</h3>
            <p>啦啦啦啦啦啦啦啦啦啦啦</p>
            <div class="btn">
                get in touch
            </div>
        </div>
</body>

</html>